<clr-main-container>

  <!-- class="header-5"  -->
  <clr-header [ngClass]="getClass()">

    <div class="branding">
      <a href="javascript://" class="nav-link" routerLink="/main/unit">
        <span class="title">蚂蚁放置</span>
      </a>
    </div>
    <div class="header-nav" [clr-nav-level]="1">

      <a class="nav-link nav-text headS" routerLinkActive="active" routerLink="/main/unit">
        <!-- <clr-icon shape="library" class="headL"></clr-icon> -->
        <span>单位</span>
      </a>

      <a class="nav-link nav-text" routerLinkActive="active" routerLink="/lab" *ngIf="gameService.game.baseWorld.science.unlocked">
        <clr-icon shape="library" class="headL"></clr-icon>
        <span class="headS">实验室</span>
      </a>

      <a class="nav-link nav-text" routerLinkActive="active" routerLink="/prestige" *ngIf="gameService.game.worldTabAv">
        <clr-icon shape="world" class="headL"></clr-icon>
        <span class="headS">旅行</span>
      </a>

      <a class="nav-link nav-text" routerLinkActive="active" routerLink="/main/exp" *ngIf="gameService.game.expTabAv">
        <clr-icon shape="scroll" class="headL"></clr-icon>
        <span class="headS">经验</span>
      </a>

      <a class="nav-link nav-text" routerLinkActive="active" routerLink="/world" *ngIf="gameService.game.homeTabAv">
        <clr-icon shape="home" class="headL"></clr-icon>
        <span class="headS">世界</span>
      </a>

    </div>
    <div class="header-actions">
<!--
<a class="nav-link nav-icon" href="http://likexia.gitee.io/idleant/" title="游戏不能直接刷新，想刷新页面请先“导出存档”并备份，然后点这里，！">
        刷新页面
      </a>
-->

      <form class="search">
        <label id="multiLabel" for="multi">买:&nbsp;</label>
        <input class="multiBuy" min="1" id="multi" type="number" name="buyMulti" placeholder="购买乘数"
          [(ngModel)]="gameService.game.buyMulti">
      </form>

      <clr-dropdown>
        <button class="nav-icon" clrDropdownTrigger>
          <clr-icon shape="tools"></clr-icon>
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">

          <clr-dropdown *ngIf="gameService.game.prestige.timeMaker.quantity.greaterThan(0)">
            <button type="button" clrDropdownTrigger>时间扭曲</button>
            <clr-dropdown-menu clrPosition="left-top">
              <a clrDropdownItem (click)="warp(p)" *ngFor="let p of minuteWarps" [ngClass]="{'disabled': !warpAv(p)}">
                扭曲 {{p}} 分钟
              </a>
            </clr-dropdown-menu>
          </clr-dropdown>

          <a clrDropdownItem (click)="all100()">全部 100%</a>

          <clr-dropdown *ngFor="let list of gameService.game.lists | filterListNotEmpty">
            <button type="button" clrDropdownTrigger>{{list.type}}</button>
            <clr-dropdown-menu clrPosition="left-top">
              <a clrDropdownItem (click)="list.buyN()">Buy n</a>
              <a clrDropdownItem (click)="list.buyTwins()">Twins</a>
              <a clrDropdownItem (click)="list.buyTeam()">Team</a>
              <a clrDropdownItem (click)="list.allCustom(p)" *ngFor="let p of percentPreset">{{p}}%</a>
            </clr-dropdown-menu>
          </clr-dropdown>


        </clr-dropdown-menu>
      </clr-dropdown>

      <a class="nav-link nav-icon" href="javascript://" (click)="opeTimeWarp()" *ngIf="gameService.game.prestige.timeMaker.quantity.greaterThan(0)">
        <clr-icon shape="clock"></clr-icon>
      </a>

      <a class="nav-link nav-icon" href="javascript://" (click)="gameService.game.pause = !gameService.game.pause">
        <clr-icon shape="play" *ngIf="gameService.game.pause; else pauseB"></clr-icon>
        <ng-template #content #pauseB>
          <clr-icon shape="pause"></clr-icon>
        </ng-template>
      </a>

      <a href="javascript://" class="nav-link nav-icon" routerLink="/options/save">
        <clr-icon shape="cog"></clr-icon>
      </a>

    </div>
  </clr-header>

  <!-- Top Material Nav -->
  <nav class="subnav matHeadNav">
    <ul class="nav navMat">
      <li class="nav-item" class="matTab" *ngFor="let g of gameService.game.baseWorld.listMaterial | filterMax">
        <a [routerLink]="['/main/unit/unit/'+g.id]" class="nav-link matLink" routerLinkActive="active" [ngClass]="{'red': g.isEnding()}">

          <span style="display:block;">
            <clr-icon class="is-info" shape="angle-double" *ngIf="g.showUp"></clr-icon>
            <clr-icon class="alert-icon is-error" shape="exclamation-triangle" *ngIf="g.isEnding()"></clr-icon>
            <span class="first small">{{g.name}}</span>
          </span>

          <span class="perSecTab small">
            <span *ngIf="g.totalPerSec.abs().greaterThan(0.001)">
              {{g.totalPerSec | format}}/s
            </span>
          </span>
          <span class="small">{{g.quantity | format}}</span>

        </a>
      </li>
    </ul>
  </nav>

  <router-outlet></router-outlet>

  <clr-modal [(clrModalOpen)]="gameService.game.timeModalOpened">
    <h3 class="modal-title">时间扭曲</h3>
    <div class="modal-body actMinH" *ngIf="gameService.game.actMin && gameService.game.actHour">
      <span> 你可以跳过 {{totTime()}}</span>
      <app-action [action]="gameService.game.actMin"></app-action>
      <app-action [action]="gameService.game.actHour"></app-action>
    </div>
  </clr-modal>

</clr-main-container>
